import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_projectpractise/components/LUnderlineTabIndicator.dart';

class StudyPage extends StatefulWidget {
  @override
  _StudyPageState createState() => _StudyPageState();
}
class _StudyPageState extends State<StudyPage> with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _scrollViewController = ScrollController(initialScrollOffset: 0.0);
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    super.dispose();
    _scrollViewController.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _studyAppbar(),
      body: NestedScrollView(
          controller: _scrollViewController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                floating: true,
                expandedHeight: 360,
                backgroundColor: Colors.white,
                // 头部导航信息
                flexibleSpace: _buildStudyInfo(),
                bottom: TabBar(
                  labelStyle: TextStyle(fontSize: 18.0,fontWeight: FontWeight.w600),
                  // indicatorWeight: 5,
                  // indicatorPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 90),
                  indicator:LUnderlineTabIndicator(),
                  controller: _tabController, 
                  labelColor: Color(0xFF3A3C42),
                  unselectedLabelStyle:TextStyle(fontSize: 17.0),
                  tabs: [
                    Tab(text: "最近学习"),
                    Tab(text: "学习任务"),
                  ]
                ),
              )
            ];
          },
          body: TabBarView(controller: _tabController, children: [
            _buildListView("aaa:"),
            _buildListView("bbb:"),
          ]
        )
      )
    );
  }

  FlexibleSpaceBar _buildStudyInfo() {
    return FlexibleSpaceBar(
      collapseMode: CollapseMode.pin,
      background: Container(//头部整个背景颜色
        height: double.infinity,
        color: Colors.white,
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: DecoratedBox(
                decoration: BoxDecoration(
                  boxShadow: [
                    //阴影
                    BoxShadow(
                      color: Colors.black12,
                      offset: Offset(0.0, 1.0), //阴影xy轴偏移量
                      blurRadius: 8.0, //阴影模糊程度
                      spreadRadius: 0 //阴影扩散程度
                    )
                  ], 
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.0)
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 50.0),
                  child: Wrap(
                    spacing: 50.0,
                    // runSpacing: 38.0,
                    alignment: WrapAlignment.center, //沿主轴方向居中
                    children: <Widget>[
                      _buildStudyData(title: '上次学习',unit: '分钟', number:'30'),
                      _buildStudyData(title: '累计学习',unit: '天', number:'10'),
                      _buildStudyData(title: '课程学习',unit: '门', number:'12')
                    ]
                  ),
                )
              ),
            ),
            Wrap(
              spacing: 30.0, // 主轴(水平)方向间距
              runSpacing: 38.0, // 纵轴（垂直）方向间距
              alignment: WrapAlignment.start, //沿主轴方向居中
              children: <Widget>[
                _buildMenuButton(title: '我的课程',image: AssetImage('assets/icons/study_icon_course.png')),
                _buildMenuButton(title: '我的实习',image: AssetImage('assets/icons/study_icon_practice.png')),
                _buildMenuButton(title: '我的收藏',image: AssetImage('assets/icons/study_icon_collect.png')),
                _buildMenuButton(title: '我的提问',image: AssetImage('assets/icons/study_icon_question.png')),
                _buildMenuButton(title: '我的题库',image: AssetImage('assets/icons/study_icon_tiku.png')),
                _buildMenuButton(title: '我的资料',image: AssetImage('assets/icons/study_icon_file.png')),
                _buildMenuButton(title: '我的笔记',image: AssetImage('assets/icons/study_icon_note.png')),
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(top:24.0),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: double.infinity, //宽度尽可能大
                  minHeight: 10.0 //最小高度为50像素
                ),
                child: Container(
                    // height: 3.0, 
                    child: DecoratedBox(decoration: BoxDecoration(color: Color(0xFFFAFAFA)),) 
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Column _buildStudyData({String title, String unit, String number}) {
    return Column(
      children: <Widget>[
        Text.rich(TextSpan(
          children: [
            TextSpan(
              text: number,
              style: TextStyle(
                color: Color(0xFF00AB84),
                fontSize:36.0,
                fontWeight: FontWeight.w500,
                fontFamily: "BebasNeue"
              ),
            ),
            TextSpan(
              text: unit,style: TextStyle(color:Color(0xFF6C7179))
            ),
          ]
        )),
        Text(title,style: TextStyle(color:Color(0xFF6C7179)))
      ],
    );
  }

  Column _buildMenuButton({String title, AssetImage image}) {
    return Column(
      children: <Widget>[
        Image(
          image: image,
          width: 23.0,
        ),
        Padding(
          padding: const EdgeInsets.only(top:8.0),
          child: Text(title,style:TextStyle(color:Color(0xFF3A3C42),fontSize: 15.5)),
        )
      ]
    );
  }

  Widget _buildListView(String s){
    return ListView.separated(
      itemCount: 8,
      separatorBuilder: (BuildContext context, int index) =>Padding(
        padding: const EdgeInsets.symmetric(horizontal:18.0),
        child: Divider(color: Colors.grey[300],height: 1,),
      ),
      itemBuilder: (BuildContext context, int index) {
        int idx = (index%4)+1;
        return Container(
          color: Colors.white,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical:20.0,horizontal:18.0),
            child: Container(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.circular(4),
                    child: Image.asset(
                      'assets/images/course$idx.png',
                      fit: BoxFit.cover,
                      width: 150,
                      height: 90,
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left:12.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text('CMA启航课：巩固基础为取证提速巩固基础为取证提速巩固基础为取证提速',
                            maxLines:2,
                            overflow: TextOverflow.ellipsis,
                            softWrap: true,
                            style:TextStyle(
                              color:Color(0xFF3A3C42),
                              fontSize:16.0,),
                            textAlign: TextAlign.left
                          ), 
                          Row(
                            children: <Widget>[
                              _buildTabItem(title:'CMA'),
                              _buildTabItem(title:'录播'),
                            ]
                          ),
                          Text('11月19日 14:30',style: TextStyle(color:Color(0xFFA3ABB8)))
                        ]
                      ),
                    ),
                  )
                ]
              ),
            ),
          ),
        );
      }
    );
  }

  Container _buildTabItem({String title}) {
    return Container(
      child: Text(title,style:TextStyle(color:Color(0xFF00AB84),fontSize:12.0)),
      // color: Color(0xFFF0FAF8),
      color: Color(0xFFF0FAF8),
      margin: const EdgeInsets.only(right:5.0,top: 5.0,bottom: 5.0),
      padding: const EdgeInsets.symmetric(vertical:2.0, horizontal:4.0),
    );
  }

  AppBar _studyAppbar() {
    return AppBar(
      elevation: 0.0,
      backgroundColor: Colors.white,
      centerTitle:true,
      title: Text("学习中心",
        style:TextStyle(color:Color(0xFF3A3C42))
      ),
      actions: <Widget>[
        new Stack(
          alignment: const Alignment(0.4, -0.5),
          children: <Widget>[
            IconButton(
              icon: ImageIcon(
                AssetImage('assets/icons/study_icon_msg.png'),
                color: Color(0xFF2e3033),
              ),
              onPressed: () {}
            ),
            ClipOval(
              child: Container(
                width: 8.0,
                height: 8.0,
                color: Color(0xFFFF4040)
              ),
            )
          ]
        )
      ],
    );
  }
  
}